import { Divider } from 'antd'
import { fabric } from 'fabric'
import { useEffect } from 'react'

export default function View() {
  // 创建矩形元素
  const rect = new fabric.Rect({
    top: 40,
    left: 40,
    width: 30,
    height: 30,
    fill: 'darkcyan'
  })

  // 创建圆形元素
  const circle = new fabric.Circle({
    top: 40,
    left: 140,
    radius: 40,
    fill: '#a18cd1'
  })

  // 创建椭圆元素
  const ellipse = new fabric.Ellipse({
    top: 40,
    left: 240,
    rx: 70,
    ry: 30,
    fill: '#84fab0'
  })

  // 创建三角形元素
  const triangle = new fabric.Triangle({
    top: 40,
    left: 440,
    width: 60, // 底边长度
    height: 80, // 底边到对角的距离（三角形的高）
    fill: 'blue'
  })

  // 创建线段元素
  const line = new fabric.Line(
    [
      40,
      140, // 起始点坐标
      200,
      300 // 结束点坐标
    ],
    {
      stroke: 'red' // 笔触颜色
    }
  )

  useEffect(() => {
    const canvas = new fabric.Canvas('c', {
      width: 1000,
      height: 1000
    })
    canvas?.add(rect)
    canvas?.add(circle)
    canvas?.add(ellipse)
    canvas?.add(triangle)
    canvas?.add(line)
  }, [])

  return (
    <div className='view-wrapper'>
      <Divider plain>基础图形</Divider>
      <canvas id='c' style={{ border: '1px solid #ccc' }}></canvas>
    </div>
  )
}
